<template>
    <section id="content">
        <img src="~path_img/z2.png" alt="" class="zhuanpan" @click="zhuanpan()" v-if="setting.zhuanpan_open">
            <section class="top">
                <article>
                    <img src="~path_img/c1.png" alt="">
                    <p>{{$t('index.top[0]')}}<br/>{{$t('index.top[3]')}}</p>
                </article>
                <article>
                    <img :src="this.$https.baseUrl + setting.site_logo" alt="">
                    <p>{{setting.site_name}}{{$t('index.top[1]')}}</p>
                    <h6>
						<span style="margin-right:10px;">LV:{{user.level}} </span>
                        <img src="~path_img/glod.png" alt="">
                        <span>{{user.money?user.money:0}}</span>
                    </h6>
                </article>
                <article>
                    <img src="~path_img/c2.png" alt="">
                    <p>{{$t('index.top[2]')}}<br>{{$t('index.top[3]')}}</p>
                </article>
            </section>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in banner_list"><img :src="url + item.path" alt=""></van-swipe-item>
            </van-swipe>
			
            <van-notice-bar left-icon="volume-o" :text="str_tongshi" color="#fff" class="tongzhi" />
			<!-- <img :src="require(''+'@/assets/images/'+ this.$i18n.locale +'.png'+'')" alt="" @click="yuyan_show = true" style="width:20%;float: left;padding:10px 20px"> -->
			<van-popup v-model="yuyan_show" position="bottom" class="popou_class" style="height: 5.1rem">
			    <router-link to="" @click.native="zh" style="color: #fff;"><img src="~path_img/zh.png" alt="">简体中文</router-link>
			    <router-link to="" @click.native="zhHK" style="color: #fff;"><img src="~path_img/zhHK.png" alt="">繁体中文</router-link>
			    <router-link to="" @click.native="en" style="color: #fff;"><img src="~path_img/en.png" alt="">English</router-link>
			</van-popup>
            <nav id="nav">
                <!-- <a href="javascript:;" @click="fun_nav(1)" :class="nav_index == 1?'on':''">{{$t('index.nav[0]')}}</a> -->
                <a href="javascript:;" @click="fun_nav(6)" :class="nav_index == 6?'on':''">{{$t('index.nav[5]')}}</a>
                <a href="javascript:;" @click="fun_nav(7)" :class="nav_index == 7?'on':''">{{$t('index.nav[6]')}}</a>
                <a href="javascript:;" @click="fun_nav(8)" :class="nav_index == 8?'on':''">{{$t('index.nav[7]')}}</a>
                <a href="javascript:;" @click="fun_nav(9)" :class="nav_index == 9?'on':''">{{$t('index.nav[8]')}}</a>
                <a href="javascript:;" @click="fun_nav(10)" :class="nav_index == 10?'on':''">{{$t('index.nav[9]')}}</a>
				
				
				<a href="javascript:;" @click="fun_nav(2)" :class="nav_index == 2?'on':''">{{$t('index.nav[1]')}}</a>
				<router-link to="/recharge" :class="nav_index == 3?'on':''">{{$t('index.nav[2]')}}</router-link>
				<router-link to="/drawing" :class="nav_index == 4?'on':''">{{$t('index.nav[3]')}}</router-link>
				
				<a href="javascript:;" @click="yuyan_show = true">{{$t('index.nav[10]')}}</a>
				<a href="javascript:;" @click="fun_nav(5)" :class="nav_index == 5?'on':''">{{$t('index.nav[4]')}}</a>
            </nav>

            <section v-if="nav_index == 1">
                <section class="video">
                    <video :src="url + '/new/img/tank.mp4'" controls="controls"></video>
                </section>
                <vue-seamless-scroll class="i-scrill" :data="srcoll_list" :class-option="classOption">
                    <p v-for="item in srcoll_list">恭喜 {{item.name}} 在（<span>{{item.type}}</span>）赢得 ￥{{item.num}}</p>
                </vue-seamless-scroll>
            </section>
            <section class="i-content" v-else-if = "nav_index == 2">
                <a href='https://xvideos.com' ><img :src="this.$https.baseUrl + 'new/img/img/av.jpg'" alt=""></a>
                <a href='https://www.hkjc.com/home/chinese/index.aspx' ><img :src="this.$https.baseUrl + 'new/img/img/saima.jpg'" alt=""></a>
                <a href='https://www.rthk.hk/radio' ><img :src="this.$https.baseUrl + 'new/img/img/hk.jpg'" alt=""></a>
                <a href='https://www.881903.com/' ><img :src="this.$https.baseUrl + 'new/img/img/ds.jpg'" alt=""></a>
                <a href='https://www.tripadvisor.com.hk/SmartDeals-g294217-Hong_Kong-Hotel-Deals.html' ><img :src="this.$https.baseUrl + 'new/img/img/jd.jpg'" alt=""></a>
                <a href='https://facebook.com' ><img :src="this.$https.baseUrl + 'new/img/img/fb.jpg'" alt=""></a>
                <a href='https://youtube.com' ><img :src="this.$https.baseUrl + 'new/img/img/yb.jpg'" alt=""></a>
            </section>
            <section class="i-content" v-else-if = "nav_index == 6">
                <a href="#" @click="iframe_s('JOKER2',1,'JOKER2',2)"><img :src="this.$https.baseUrl + 'new/img/img/joker2.png'" alt=""></a>
				<a href="#" @click="iframe_s('JOKER5',1,'JOKER5',2)"><img :src="this.$https.baseUrl + 'new/img/img/joker5.png'" alt=""></a>
				<a href="#" @click="iframe_s('JOKER10',1,'JOKER10',2)"><img :src="this.$https.baseUrl + 'new/img/img/joker10.png'" alt=""></a>
				<a href="#" @click="iframe_s('JOKER20',1,'JOKER20',2)"><img :src="this.$https.baseUrl + 'new/img/img/joker20.png'" alt=""></a>
				
				<a href="#" @click="iframe_s('PG', 1, 'PG')"><img :src="this.$https.baseUrl + 'new/img/img/pg.png'" alt=""/></a>
				<a href="#" @click="iframe_s('JDB', 1, 'JDB')"><img :src="this.$https.baseUrl + 'new/img/img/jdb.png'" alt=""/></a>
				<a href="#" @click="iframe_s('CQ9', 1, 'CQ9', 'redirect')"><img :src="this.$https.baseUrl + 'new/img/img/cq9.png'" alt=""/></a>
				<a href="javascript:;" style="width: 100%;" @click="iframe_s('UU', 1, 'UU','','')">
					<img :src="this.$https.baseUrl + 'new/img/img/uu.png'" alt="">
				</a>
				<a href="javascript:;" style="width: 100%;" @click="click_dct('aux')">
					<img :src="this.$https.baseUrl + 'new/img/img/ava.png'" alt="">
				</a>
				<a href="javascript:;" style="width: 100%;" @click="click_dct('evo')">
					<img :src="this.$https.baseUrl + 'new/img/img/evo.png'" alt="">
				</a>
				<a href="javascript:;" style="width: 100%;" @click="click_dct('hs')">
					<img :src="this.$https.baseUrl + 'new/img/img/hack.png'" alt="">
				</a>
				<a href="javascript:;" style="width: 100%;" @click="click_dct('relax')">
					<img :src="this.$https.baseUrl + 'new/img/img/rela.png'" alt="">
				</a>
				<a href="javascript:;" style="width: 100%;" @click="click_dct('yg')">
					<img :src="this.$https.baseUrl + 'new/img/img/yg.png'" alt="">
				</a>

				<a href="javascript:;" style="width: 100%;" @click="click_dct('png')">
					<img :src="this.$https.baseUrl + 'new/img/leyu/plg.png'" alt="">
				</a>

				<a href="javascript:;" style="width: 100%;" @click="click_dct('nlc')">
					<img :src="this.$https.baseUrl + 'new/img/img/nlc.png'" alt="">
				</a>
				<a href="javascript:;" style="width: 100%;" @click="click_dct('funta')">
					<img :src="this.$https.baseUrl + 'new/img/img/funta.png'" alt="">
				</a>
				<a href="javascript:;" style="width: 100%;" @click="click_vp('fishing')">
					<img :src="this.$https.baseUrl + 'new/img/img/vp.png'" alt="">
				</a>
				<a href="javascript:;" style="width: 100%;" @click="click_sky('singleplayer_games')">
					<img :src="this.$https.baseUrl + 'new/img/img/sky.png'" alt="">
				</a>
				
				
            </section>
            <section class="i-content" v-else-if = "nav_index == 7">
                <!-- <a href="#" @click="iframe_s('SEXY',1,'SEXY')"><img :src="this.$https.baseUrl + 'new/img/img/ae.png'" alt=""></a>
				<a href="#" @click="iframe_s('EVO',1,'EVO')"><img :src="this.$https.baseUrl + 'new/img/leyu/evo.png'" alt=""></a>
				<a href="#" @click="iframe_s('DG',1,'DG')"><img :src="this.$https.baseUrl + 'new/img/img/dg.png'" alt=""></a>
				<a href="#" @click="iframe_s('WM',1,'WM')"><img :src="this.$https.baseUrl + 'new/img/leyu/wm.png'" alt=""></a> -->
				<a href="#" @click="iframe_s('AWC', 1, 'AWC')"
				  ><img :src="this.$https.baseUrl + 'new/img/img/ae.png'" alt=""
				/></a>
				<a href="#" @click="iframe_s('IBO', 1, 'IBO')"
				  ><img :src="this.$https.baseUrl + 'new/img/img/ibo.png'" alt=""
				/></a>
				<a href="#" @click="iframe_s('DG', 1, 'DG')"
				  ><img :src="this.$https.baseUrl + 'new/img/img/dg.png'" alt=""
				/></a>
				<a href="#" @click="iframe_s('OGPlus', 1, 'OGPlus')"
				  ><img :src="this.$https.baseUrl + 'new/img/img/og.png'" alt=""
				/></a>
				
				
				<!-- <a href="#" @click="iframe_s('IBO',1,'IBO')"><img :src="this.$https.baseUrl + 'new/img/img/ibo.png'" alt=""></a>
				
				<a href="#" @click="iframe_s('OGPlus',1,'OGPlus')"><img :src="this.$https.baseUrl + 'new/img/img/og.png'" alt=""></a> -->
				<a href="javascript:;" style="width: 100%;" @click="iframe_s('WM', 1, 'WM','','')">
					<img :src="this.$https.baseUrl + 'new/img/leyu/wm.png'" alt="">
				</a>
				<a href="javascript:;" style="width: 100%;" @click="iframe_s('EZU', 1, 'EZU','','')">
					<img :src="this.$https.baseUrl + 'new/img/img/ezugi.png'" alt="">
				</a>
            </section>
            <section class="i-content" v-else-if = "nav_index == 8">
				<!-- <a href="#" @click="iframe_s('KY',1,'KY')"><img :src="this.$https.baseUrl + 'new/img/img/KY.png'" alt=""></a>
				<a href="#" @click="iframe_s('LEG',1,'LEG')"><img :src="this.$https.baseUrl + 'new/img/leyu/leg.png'" alt=""></a>
				<a href="#" @click="iframe_s('KX',1,'KX')"><img :src="this.$https.baseUrl + 'new/img/img/KX.png'" alt=""></a>
                <a href="#" @click="iframe_s('NW',1,'NW')"><img :src="this.$https.baseUrl + 'new/img/img/XSJ.png'" alt=""></a> -->
				<a href="#" @click="iframe_s('XSJ', 1, 'XSJ')"
				  ><img :src="this.$https.baseUrl + 'new/img/img/XSJ.png'" alt=""
				/></a>
				<a href="#" @click="iframe_s('KX', 1, 'KX')"
				  ><img :src="this.$https.baseUrl + 'new/img/img/KX.png'" alt=""
				/></a>
				<a href="#" @click="iframe_s('IMCG', 1, 'IMCG')"
				  ><img :src="this.$https.baseUrl + 'new/img/img/IM.png'" alt=""
				/></a>
				<a href="#" @click="iframe_s('KY', 1, 'KY')"
				  ><img :src="this.$https.baseUrl + 'new/img/img/KY.png'" alt=""
				/></a>
                
                <!-- <a href="#" @click="iframe_s('IMCG',1,'IMCG')"><img :src="this.$https.baseUrl + 'new/img/img/IM.png'" alt=""></a> -->
                
            </section>
            <section class="i-content" v-else-if = "nav_index == 9">
                <a href="#" @click="iframe_s('UG',1,'UG')"><img :src="this.$https.baseUrl + 'new/img/img/UG.png'" alt=""></a>
                <!-- <a href="#" @click="iframe_s('SABA',1,'SABA')"><img :src="this.$https.baseUrl + 'new/img/leyu/hg.png'" alt=""></a> -->
				
				<!-- <a href="#" @click="iframe_s('HG',1,'HG')"><img :src="this.$https.baseUrl + 'new/img/leyu/hg.png'" alt=""></a>
                <a href="#" @click="iframe_s('SBO',1,'SBO')"><img :src="this.$https.baseUrl + 'new/img/leyu/sbo.jpg'" alt=""></a> -->
            </section>
            <section class="i-content" v-else-if = "nav_index == 10">
                <a href="#" @click="iframe_s('JOKER1',1,'JOKER1',6)"><img :src="this.$https.baseUrl + 'new/img/img/jokerby.png'" alt=""></a>
				<a href="#" @click="iframe_s('PS',1,'PS','redirect')"><img :src="this.$https.baseUrl + 'new/img/img/psby.png'" alt=""></a>
				<a href="#" @click="iframe_s('YL',1,'YL','redirect')"><img :src="this.$https.baseUrl + 'new/img/img/ylby.png'" alt=""></a>
            </section>

            <bottom></bottom>

            <van-popup v-model="show" class="iframe_alert">
                <h5>{{$t('index.youxi[0]').replace('show_title',show_title)}}</h5>
                <article class="top1">
                    <p>{{$t('index.youxi[1]')}}：{{user.money}}</p>
                    <span @click="zijihuishou" v-if="huishou_type == 0">{{$t('erduzhuanhuan.zijinhuishou')}}</span>
                    <span v-else>{{$t('index.youxi[2]')}}</span>
                </article>
                <article class="top2">
                    <input type="number" :placeholder="$t('index.youxi[3]')" v-model="money">
                    <span @click="quanbu">{{$t('index.youxi[4]')}}</span>
                </article>
                <article class="top3">
                    <span @click="jinruyouxi">{{$t('index.youxi[5]')}}</span>
                    <span @click="jinruyouxi_liji">{{$t('index.youxi[6]')}}</span>
                </article>
            </van-popup>

            <iframe_alt :show="iframe_show" :type="iframe_type" :src="iframe_src" @close="close"></iframe_alt>
        

        <section id="vp_alert" class="erji_alert" v-if="vp_show">
	      <section class="erji_alert_close" @click="vp_show = false">关闭</section>
	      <section class="erji_alert_section_z">
	        <section v-for="item2 in vp_data" class="erji_alert_section" @click="iframe_s('VP', 1, 'VP','',item2.id)">
	          <span>{{item2.name}}</span>
	          <img :src="item2.img">
	        </section>
	      </section>
	    </section>

	    <section id="dct_alert" class="erji_alert" v-if="dct_show">
	      <section class="erji_alert_close" @click="dct_show = false">关闭</section>
	      <section class="erji_alert_section_z">
	        <section v-for="item2 in dct_data" class="erji_alert_section" @click="iframe_s('DCT', 1, 'DCT','',item2.id)">
	          <span>{{item2.name}}</span>
	          <img :src="item2.img" style="width: 100%; height:200px;">
	        </section>
	      </section>
	    </section>

	    <section id="sky_alert" class="erji_alert" v-if="sky_show">
	      <section class="erji_alert_close" @click="sky_show = false">关闭</section>
	      <section class="erji_alert_section_z">
	        <section v-for="item2 in sky_data" class="erji_alert_section"  @click="iframe_s('SKY', 1, 'SKY','',item2.id)">
	          <span>{{item2.name}}</span>
	          <img :src="item2.img">
	        </section>
	      </section>
	    </section>
    </section>


</template>

<script>
    import Bottom from "@/components/bottom"
    import vueSeamlessScroll from 'vue-seamless-scroll'
    import { Swipe, SwipeItem,NoticeBar,Popup,Dialog  } from 'vant'
    import iframe_alt from "@/components/iframe_alt"
    export default {
        name: "index",
        components: {
            Bottom,
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
            [NoticeBar.name]: NoticeBar,
            [Popup.name]: Popup,
			[Dialog.name]: Dialog,
            vueSeamlessScroll,
            iframe_alt
        },
        data() {
            return {
                show: false,
                show_title: '',
                huishou_type: 0,
                nav_index: 1,
                refreshing: false,
                banner_list:[],
                str_tongshi: '',
                srcoll_list: [],
                classOption: {
                    step: 0.5
                },
                iframe_show: false,
                iframe_src: '',
                iframe_type: '',
				user:{},
				money:'',
				id:0,
				api:{},
				setting:{},
				url:this.$https.baseUrl ,
				yuyan_show: false,
				vp_show: false,
		      	vp_data: [],
		      	dct_data: [],
		      	dct_show:false,
		      	sky_show: false,
		      	sky_data: [],
		        new_src : ''
            }
        },
        methods: {
        click_sky(str){
	      this.sky_show = true;
	      this.sky_data = [];
	      this.$https.fetchGet2('/member/new_gamelist_sky?type=sky&provider=' + str,{}).then( (res) => {
	        this.sky_data = res.Data;
	      })
	    },
	    click_dct(str){
	      this.dct_show = true;
	      this.dct_data = [];
	      this.$https.fetchGet2('/member/new_gamelist_dct?type=dct&provider=' + str,{}).then( (res) => {
	        this.dct_data = res.Data;
	      })
	    },
	    click_vp(str){
	      this.vp_show = true;
	      this.vp_data = [];
	      this.$https.fetchGet2('/member/new_gamelist_vp?type=vp&provider=' + str,{}).then( (res) => {
	        this.vp_data = res.Data;
	      })
	    },
			zhuanpan(){
				this.tongzhi()
				let src = this.$https.baseUrl + 'm/zhuanpan?token='+JSON.parse(window.localStorage.getItem("vuex")).token
				
				this.iframe_src = src
				this.iframe_type = 1
				this.iframe_show = true
			},
			userinfo(){
				this.$https.fetchGet('/m/personal',{}).then( res => {
				    let data = res.data
				    this.$store.commit('user',data.member)
				    this.user = data.member
				    this.setting = data.setting
					this.api = data.api_mod
					this.banner_list = data.banners
					this.str_tongshi = data.system_notices.content + '        線上人數'+ parseInt(Math.random()*10000,10)
					this.srcoll_list = data.srcoll_list
				})
			},
			iframe_a(src=''){
			    // this.show = true
			    this.iframe_src = src
			    this.iframe_type = 1
				this.iframe_show = true
			},
            iframe_s(id,type, title,redirect='',game_id = "") {
				
				for(var i = 0;i<this.api.length;i++){
					if(this.api[i].api_name == id){
						this.id = this.api[i].id
					}
				}
				
				this.$https.fetchGet_chonghui('/api/check',{'api_name': id,game_id: game_id},false).then(res => {
					
				
				})
				
				
				this.money = '';
                this.show_title = title
                this.show = true
				var u = navigator.userAgent;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
				if(isAndroid && title.search("JOKER") != -1){
					var src = this.$https.baseUrl + '/m/app_login?url=%2Fgame%2FplayGame%3Fplat_type%3D'+title+'%26game_type%3D2%26devices%3D1&code='+title+'&token='+JSON.parse(window.localStorage.getItem("vuex")).token

				}else{
					var src = this.$https.baseUrl + '/game/playGame?plat_type='+title+'&game_type='+redirect+'&token='+JSON.parse(window.localStorage.getItem("vuex")).token+"&game_id=" + game_id
				}
				
				
                this.iframe_src = src
                this.iframe_type = type
            },
            close() {
                this.iframe_show = false;
				this.iframe_src = '';
            },
            onRefresh() {
                this.$toast(this.$t('common.shuaxin'));
                this.onLoad()
                //这里写加载
            },
            onLoad() {
                if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                    return;
                }
            },
            fun_nav(int) {
                this.nav_index = int
                if(int == 5 ){
                    this.$toast(this.$t('common.weihu'));
                }
            },
            zijihuishou(){
                this.huishou_type = 1
				this.$https.fetchPost('/member/transfer_all',{}).then(res => {
				    this.userinfo();
					this.huishou_type = 0
				}).catch(err => {
				    this.$toast('网络异常');
				})
                // this.$toast('资金回收')
                // setTimeout(res => {
                //     this.huishou_type = 0
                // },1500)
            },
            jinruyouxi(){
                this.iframe_show = true
            },
            jinruyouxi_liji(){
				if(this.money >0){
					this.$https.fetchPost('/member/transfer',{'money': this.money, 'transfer_type': 0 ,'account1': '1', 'account2': this.id}).then( res => {
						this.userinfo()
					})
				}
                
                
				this.iframe_show = true
            },
            quanbu(){
				this.money = this.user.money;
                // this.$toast('全部')
            },
			zh() {
			    this.$store.commit('i18n','zh')
			    this.$i18n.locale='zh'
			    this.yuyan_show = false
			},
			zhHK() {
			    this.$store.commit('i18n','zhHK')
			    this.$i18n.locale='zhHK'
			    this.yuyan_show = false
			},
			en() {
			    this.$store.commit('i18n','en')
			    this.$i18n.locale='en'
			    this.yuyan_show = false
			},
			tongzhi(){
				this.$https.fetchGet('m/tongzhi',{},false).then( res => {
				})
			}
        },
        mounted() {
			var that = this;
			this.userinfo();
			that.tongzhi()
			// Dialog.confirm({
			//     message: '東亞娛樂城 已更新新版APP，請點擊更新，如無法更新，請瀏覽器輸入（web.dyyyl.com/app）  如已更新請忽略！',
			//     // message: this.$t('common.level_alt').replace('{level}',this.data_user.level).replace('{integral}',this.data_user.levelmoney),
			//     confirmButtonText: '更新',
			//     cancelButtonText: '跳過'
			// })
			//     .then(() => {
			// 		// location.href='http://web.dyyyl.com/app';
			// 		let src = this.$https.baseUrl + 'app'
					
			// 		this.iframe_src = src
			// 		this.iframe_type = 1
			// 		this.iframe_show = true
			//         // this.$https.fetchGet('/m/level',{}).then(res => {
			//         //     this.$toast(this.$t('common.lingquchenggong'))
			//         // })
			//     })
			//     .catch(() => {
			//         // on cancel
			//     });
        }
    }
</script>

<style scoped lang="less">
.erji_alert{
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 2000;
    background-color: #fff;
    overflow-y: auto;
    .erji_alert_close{
      font-size: .36rem;
      color: #666;
      padding: 0.3rem 0.3rem 0;
      text-align: right;
    }
    .erji_alert_section_z{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 .4rem;
      .erji_alert_section{
        width: 49%;
        span{
          font-size: .36rem;
        }
        img{
          width: 100%;
          height: 4rem;
        }
      }
    }

  }
	.zhuanpan{
		position:fixed;right:10px;top:110px;width:100px;z-index:9;
		padding: 20px;
		animation: jump 1.5s ease infinite;
	}
	@keyframes jump{
	                0%{ transform:translateY(0) scale(1,1);}
	                /* 中间状态图片位移并且拉伸 */
	                50%{transform:translateY(-50px) scale(0.97,1.03);}
	                100%{transform:translateY(0) scale(1,1);}
	            }
#content{
    .top{
        padding: .2rem 0;
        display: flex;
        & > article{
            width: 33%;
            color: #fff;
            font-size: .26rem;
            & > img{
                // width: 1.3rem;
				height:1rem;
            }
            & > p{}
            & > h6{
                padding-top: .1rem;
                display: flex;
                align-items: center;
                justify-content: center;
                & > img{
                    width: .46rem;
                    margin-right: .2rem;
                }
                & > span{
                    font-weight: normal;
                    font-size: .36rem;
                }
            }
        }
        & > article:nth-child(2){
            width: 36%;
        }

    }
    .my-swipe{
        img{
            height: 3rem;
        }
    }
    .tongzhi{
        background: url("~path_img/noticeBg.jpg") center center no-repeat;
        background-size: cover;
        color: #fff;
        font-size: .4rem;
    }
    #nav{
        padding:.1rem .2rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        a{
            display: block;
            width: 19%;
            font-size: .36rem;
            color: #fff;
            background-color: #272224;
            padding: .2rem;
            margin-bottom: .1rem;
            &.on{
                background: url("~path_img/btn-s.png") center no-repeat;
                background-size: cover;
            }
        }
    }
    .video{
        width: 100%;
        height: 5.2rem;
        video{
            width: 100%;
            height: 5.2rem;
        }
    }
    .i-scrill{
        text-align: left;
        height: 6rem;
        overflow: hidden;
        p{
            padding: .2rem .5rem;
            font-size: .4rem;
            color: #e7ce5f;
            span{
                color:rgb(184,0,0)
            }
        }
    }
    .i-content{
        height: 10.6rem;
        overflow-y: auto;
		padding-bottom:2rem;
        a{
            display: block;
			font-size: 10px;
            // margin-bottom: -.05rem;
            img{
                width: 100%;
            }
        }
    }
    .iframe_alert{
        width: 94%;
        background-color: #edeef0;
        border-radius: .2rem;
        & > h5{
            background: linear-gradient(to bottom, #a70707 0%, #4a040f 100%);
            color: #fff;
            font-size: .42rem;
            line-height: 1.2rem;
        }
        & > article{
            padding: .3rem .4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .top1{
            p{
                color: #333333;
                font-size: .4rem;
            }
            span{
                background: linear-gradient(to bottom, #689dbf 0%, #0c2b3a 100%);
                font-size: .3rem;
                color: #fff;
                border-radius: 3px;
                line-height: .9rem;
                width: 2.1rem;
            }
        }
        .top2{
            input{
                width: 65%;
                font-size: .4rem;
                line-height: .8rem;
                border: none;
                padding: 0 .2rem;
            }
            span{
                background: linear-gradient(to bottom, #de0b0b 0%, #520511 100%);
                border-radius: 3px;
                font-size: .42rem;
                border-radius: 3px;
                color: #fff;
                width: 1.3rem;
                line-height: .9rem;
                width: 2.1rem;
            }
        }
        .top3{
            justify-content: center;
            span{
                background: linear-gradient(to bottom, #dcdcdc 0%, #969696 100%);
                font-size: .4rem;
                border-radius: 3px;
                line-height: 1.1rem;
                text-align: center;
                width: 44%;
                margin:0 3%;
                color: #5a5a5a;
                &:last-child{
                    background: linear-gradient(to bottom, #a70707 0%, #50030f 100%);
                    color: #fff;
                }
            }
        }
    }
}
.popou_class{
    border-radius: 5px 5px 0 0;
    background-color: rgba(255,255,255,.8);
    padding: .5rem;
    height: 8.3rem;
    a{
        display: block;
        font-size: .34rem;
        line-height: 1.3rem;
        background-color: rgba(0,0,0,.8);
        margin-bottom: .2rem;
        border-radius: 5px;
        img{
            width: .8rem;
            position: relative;
            top: .1rem;
            margin-right: .3rem;
        }
    }
}
</style>
<style>
    .van-swipe__indicators{
        display: none;
    }

</style>
